<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import * as Cesium from 'cesium/Cesium'
export default {
  name: 'HelloWorld',
  data(){
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium();
  },
  methods:{
    initCesium:function(){
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhNTU1MGJiMC1hYjYzLTQyMDYtOTRhMy03YWE3ZjM4YWI4YjIiLCJpZCI6MjA4Mjk3LCJpYXQiOjE3MTI5MTA1MDh9.K05wQeKiZHHJJbHrGNw-KUV-jHbGMnji-7l3WfuH9WA';
      this.viewer = new Cesium.Viewer('cesiumContainer');
      let _that = this;
      this.viewer.camera.changed.addEventListener(function (){
        console.log("aaa");
        console.log(_that.getCenterPosition());
      });
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(119.99224091905127,30.22824663312681,3712.372324029593),
        orientation:{
          heading: Cesium.Math.toRadians(90,0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0
        }
      });
    },
    getCenterPosition: function() {
      let result = this.viewer.camera.pickEllipsoid(new Cesium.Cartesian2(this.viewer.canvas.clientWidth / 2, this.viewer.canvas
          .clientHeight / 2));
      let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
      let lon = curPosition.longitude * 180 / Math.PI;
      let lat = curPosition.latitude * 180 / Math.PI;
      let height = this.getHeight();
      return {
        lon: lon,
        lat: lat,
        height: height
      };
    },
    getHeight:function(){
      if (this.viewer) {
        let scene = this.viewer.scene;
        let ellipsoid = scene.globe.ellipsoid;
        let height = ellipsoid.cartesianToCartographic(this.viewer.camera.position).height;
        return height;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,body,#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
}
</style>
